无冲突设置 ESLint、Prettier、EditorConfig

发表于 | 分类于 |
字数统计: 1.5k 字 | 阅读时长 ≈ 6 分钟

前言

如何解决项目代码质量检测与风格统一问题

  • 与编辑器相关的所有配置（结尾行、缩进风格、缩进大小等等）应该由 EditorConfig 来处理
  • 和代码格式相关的一切事物应该由 Prettier 处理
  • 剩下的（代码质量）则由 ESLint 负责
  • 安装 ESLint、Prettier 插件自动检测并修复问题，通过编写 vscode/setting.json 管理插件配置

导致冲突的原因

项目中，曾经出现“鬼畜缩进”的情况，原因就是：编辑器不知道听谁进行格式化

场景一：eslint、prettier 打架

解决办法

  1. 使用 ESLint 插件 根据 .eslintrc 文件中的配置校验代码，并关掉 ESLint 的格式化校验
  2. 使用 Prettier 插件 根据 .prettierrc 文件中的配置格式化代码

场景二：prettier、vetur 打架

如果启用以下配置，且没有 .prettierrc 文件。

会出现：在代码未保存时，若采用 prettier 格式化，结尾有分号；保存后又会按照 vetur 格式化，结尾无分号 的现象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"[vue]": {
  "editor.defaultFormatter": "octref.vetur",
  "editor.formatOnSave": true // 文件保存自动格式化
},
// prettier插件配置
"prettier.semi": true, // 是否有结尾的分号
"prettier.singleQuote": false, // 是否强制所有的引号变成单引号
// vetur插件配置
"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "semi": false, 
    "singleQuote": true 
  },
},

原因：当前项目中没有配置.prettierrc文件，格式化时采用的插件规范（prettier）与保存时采用的格式化方案（vetur）冲突导致的。

所以最主要的解决方法就是有一个公共的.prettierrc配置文件。这样settings.json文件中的配置就会被覆盖了。

与 vscode 集成

安装 ESLint、Prettier 插件，即可做到：自动检测不符合规范的代码、自动修复。

当然，前提是需安装eslint及prettier包。同时配合.eslintrc.* 及.prettierrc.* 文件。

vscode/setting.json

这个文件是针对工作区/项目的配置文件，会覆盖默认的全局配置。

写的是对eslint、prettier等插件的一些配置。

下面提及的 .eslintrc.json、.prettierrc.json 则是对代码规范的配置。

二者目标不一样。vscode的所有配置都针对于插件或者vscode自身的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  // prettier 插件配置
  // 全局默认使用 prettier 格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  // 针对js文件默认使用 prettier 格式化
  "[javascript]": {
    // 可以把值设置成 null，则不使用 prettier 格式化
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // 保存时不自动修复
    "editor.formatOnSave": true
  },
  
  // eslint 插件配置
  "eslint.options": {
    // 检测后缀名为以下的文件
    "extensions": [".js", ".vue", ".jsx"]
  },
  "editor.codeActionsOnSave": {
    // 每次保存的时候将代码按eslint格式进行修复
    "source.fixAll.eslint": true
  },
  
  // 以下配置会被 .prettierrc 覆盖，最好不要写在这里
  "prettier.semi": false,
  "prettier.singleQuote": true,
}

Prettier 插件 还为文档提供【配置默认格式化程序】的功能，选择后，该文档后缀将全部应用配置的默认格式化程序，并添加到 setting.json。比如在 main.js 里面选择默认格式化程序为： Javascript和TypeScript的语言功能，会发现 setting.json 文件，默认添加/更改记录

1
2
3
"[javascript]": {
  "editor.defaultFormatter": "vscode.typescript-language-features",
},

.eslintrc.json

为了可以和 Prettier 一起使用 ESLint，办法就是 停用可能与 Prettier 冲突的所有 ESLint 规则（仅指代码格式规则）。

ESLint 关闭格式校验、集成 Prettier

通过 eslint-plugin-prettier、eslint-config-prettier 包

1
npm install eslint-config-prettier eslint-plugin-prettier --save-dev

eslint-plugin-prettier
一个 ESLint 插件， 由 Prettier 生态提供，用于报告错误给 ESLint

eslint-config-prettier
使用 Prettier 默认推荐配置，并且关闭 eslint 自身的格式化功能，防止 Prettier 和 ESLint 的自动格式化的冲突

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  // 顺序很重要，后面的会覆盖前面的配置
  "extends": [
    // 引入eslint的核心功能，并且报告一些常见的共同错误
    "eslint:recommended",
    // 添加插件，可以停用下面设置的格式化规则，并且可以达到 prettier 格式错误被当作 ESLint 错误的效果
    "plugin:prettier/recommended"
  ],
  "env": {
    "es6": true,
    "node": true
  },
  "rules": {
    // 会被 prettier 覆盖
    "max-len": [
      "error",
      { "code": 80 }
    ],
    "indent": [
      "error",
      2
    ],
    // 可以覆盖.prettierrc.json，但最好不要，分工明确
    'prettier/prettier': ['error', { singleQuote: true, parser: 'flow' }],
  }
}

.prettierrc.json

还可以通过 .prettierignore 文件，定义不进行格式化的文件后缀

1
2
3
4
5
6
7
8
9
10
module.exports = {
  // 一行最多字符数
  printWidth: 20,
  // 空格缩进
  tabWidth: 2,
  // 是否使用缩进符
  useTabs: false,
  // 行尾是否需要有分号
  semi: false,
}

.editorconfig

需要在 IDE 上安装必要的 EditorConfig 插件或扩展。

添加以下自定义编辑器配置后，编辑器就会知道如何格式化文件（自我理解是一份默认的格式化配置）

1
2
3
4
5
6
7
8
9
10
11
# 打开的文件会在文件当前目录查找.editorconfig文件，如果没有找到则会一直往上级找，直至找到.editorconfig文件的root配置为true为止
root = true

# 对于所有的文件
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

编辑器下面会有这个东西，里面的值就是配置文件配置的（如果没有 EditorConfig 插件，配置文件将不生效）

img

避免 EditorConfig 与 Prettier 的重复配置

Prettier 和 EditorConfig 共享一些配置项，我们不希望在两个单独的文件中重复这些配置项，并让二者保持同步（比如：尾行配置）。

Prettier 的最新版本通过解析 .editorconfig 文件来确定要使用的配置选项解决了此问题。

这些选项仅限于：

1
2
3
4
5
6
7
8
9
end_of_line
indent_style
indent_size/tab_width
max_line_length
# 等同于 Pettier 的以下选项
"endOfLine"
"useTabs"
"tabWidth"
"printWidth"

Prettier 会覆盖 EditorConfig

参考文章

【译】无冲突设置 ESLint，Prettier 和 EditorConfig

vscode之代码格式化的prettier、eslint、vetur以及VSCODE的settings.json配置文件